<template>
	<view class="interest-container">
		<!-- 搜索栏 -->
		<view class="search-bar">
			<view class="search-input">
				<text class="search-icon">🔍</text>
				<text class="placeholder">搜索兴趣、话题</text>
			</view>
		</view>

		<!-- 热门兴趣标签 -->
		<view class="hot-tags-section">
			<text class="section-title">热门兴趣</text>
			<view class="hot-tags">
				<view class="tag-item" v-for="(tag, index) in hotTags" :key="index" @click="selectTag(tag)">
					<text>{{ tag }}</text>
				</view>
			</view>
		</view>
		
		<!-- 更多筛选按钮 -->
		<view class="filter-button-wrapper">
			<button class="filter-button" @click="toggleCategorySection">
				<text>更多筛选</text>
				<text class="arrow-icon">{{ showCategorySection ? '▲' : '▼' }}</text>
			</button>
		</view>

		<!-- 分类导航，只在点击更多筛选按钮时显示 -->
		<view class="category-section" v-if="showCategorySection">
			<scroll-view scroll-x="true" class="category-scroll" show-scrollbar="false">
				<view class="category-item" v-for="(category, index) in categories" :key="index"
					:class="{ active: selectedCategory === category }" @click="selectCategory(category)">
					<text>{{ category }}</text>
				</view>
			</scroll-view>
		</view>

		<!-- 兴趣列表 -->
		<view class="interest-list">
			<view class="interest-card" v-for="(interest, index) in filteredInterests" :key="index"
				@click="goToDetail(interest.id)">
				<!-- 兴趣头部信息 -->
				<view class="interest-header">
					<image :src="interest.coverImage" mode="aspectFill" class="cover-image"></image>
					<view class="interest-overlay">
						<text class="interest-title">{{ interest.title }}</text>
						<view class="interest-stats">
							<view class="stat-item">
								<text class="icon-emoji">👥</text>
								<text class="stat-text">{{ interest.members }}人加入</text>
							</view>
							<view class="stat-item">
								<text class="icon-emoji">💬</text>
								<text class="stat-text">{{ interest.topics }}个话题</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 话题预览 -->
				<view class="topic-preview" v-if="interest.recentTopics.length > 0">
					<view class="topic-item" v-for="(topic, topicIndex) in interest.recentTopics" :key="topicIndex">
						<text class="topic-author">{{ topic.author }}</text>
						<text class="topic-content">{{ topic.content }}</text>
					</view>
				</view>

				<!-- 底部信息 -->
				<view class="interest-footer">
					<view class="activity-count">
						<text>{{ interest.activities }}个活动</text>
					</view>
					<button class="join-button" @click.stop="joinInterest(interest.id)">加入</button>
				</view>
			</view>
		</view>

		<!-- 加载更多 -->
		<view class="load-more" v-if="hasMore">
			<text @click="loadMore">加载更多</text>
		</view>

		<!-- 空状态 -->
		<view class="empty-state" v-if="filteredInterests.length === 0">
			<text class="empty-icon">⭐</text>
			<text class="empty-text">暂无相关兴趣</text>
		</view>
		
		<!-- 底部tabbar -->
		<view class="tabbar">
			<BottomTabbar theme="light" :value="2" :color="'#892FE8'" />
		</view>
	</view>
</template>

<script setup>
	import { onPullDownRefresh , onReachBottom } from "@dcloudio/uni-app"
	import {
		ref,
		computed,
		onMounted
	} from 'vue';

	// 搜索和筛选状态
	const searchQuery = ref('');
	const selectedCategory = ref('全部');
	const selectedTag = ref('');
	const hasMore = ref(true);
	// 控制分类导航显示状态
	const showCategorySection = ref(false);
	
	// 切换分类导航显示状态
	const toggleCategorySection = () => {
		showCategorySection.value = !showCategorySection.value;
	};

	// 热门标签
	const hotTags = ref([
		'摄影', '健身', '读书', '旅行', '美食',
		'音乐', '电影', '编程', '瑜伽', '烘焙'
	]);

	// 分类列表
	const categories = ref([
		'全部', '生活', '艺术', '科技', '运动',
		'学习', '社交', '公益', '职场', '创意'
	]);

	// 兴趣数据
	const interests = ref([{
			id: 1,
			title: '摄影爱好者',
			coverImage: '/static/avatar/1.jpg',
			members: 1243,
			topics: 567,
			activities: 89,
			category: '艺术',
			recentTopics: [{
				author: '小明',
				content: '分享几张最近拍的风景照，欢迎大家点评...'
			}]
		},
		{
			id: 2,
			title: '城市马拉松',
			coverImage: '/static/avatar/2.jpg',
			members: 2890,
			topics: 1245,
			activities: 156,
			category: '运动',
			recentTopics: [{
				author: '马拉松达人',
				content: '下周末北京马拉松报名开始，一起报名吧！'
			}]
		},
		{
			id: 3,
			title: '编程技术交流',
			coverImage: '/static/avatar/3.jpg',
			members: 3456,
			topics: 2341,
			activities: 45,
			category: '科技',
			recentTopics: [{
					author: '码农小王',
					content: '最近在学习Vue3，有什么好的资源推荐吗？'
				},
				{
					author: '前端大牛',
					content: '分享一个我写的前端组件库，欢迎star！'
				}
			]
		},
		{
			id: 4,
			title: '美食探店团',
			coverImage: '/static/avatar/4.jpg',
			members: 1876,
			topics: 987,
			activities: 234,
			category: '生活',
			recentTopics: [{
				author: '吃货小李',
				content: '发现一家超赞的日料店，本周六一起去打卡！'
			}]
		},
		{
			id: 5,
			title: '读书会',
			coverImage: '/static/avatar/5.jpg',
			members: 987,
			topics: 432,
			activities: 67,
			category: '学习',
			recentTopics: [{
				author: '书虫小张',
				content: '本月共读《百年孤独》，周日下午三点讨论。'
			}]
		}
	]);

	// 计算过滤后的兴趣列表
	const filteredInterests = computed(() => {
		return interests.value.filter(interest => {
			// 分类筛选
			if (selectedCategory.value !== '全部' && interest.category !== selectedCategory.value) {
				return false;
			}

			// 标签筛选
			if (selectedTag.value && !interest.title.includes(selectedTag.value)) {
				return false;
			}

			// 搜索筛选
			if (searchQuery.value && !interest.title.includes(searchQuery.value)) {
				return false;
			}

			return true;
		});
	});

	// 选择标签
	const selectTag = (tag) => {
		selectedTag.value = tag;
	};

	// 选择分类
	const selectCategory = (category) => {
		selectedCategory.value = category;
	};

	// 跳转到兴趣详情页
	const goToDetail = (id) => {
		uni.navigateTo({
			url: `/pages_interest/detail?id=${id}`
		});
	};

	// 加入兴趣
	const joinInterest = (id) => {
		uni.showToast({
			title: '加入成功',
			icon: 'success'
		});
	};

	// 加载更多
	const loadMore = () => {
		// 模拟加载更多数据
		setTimeout(() => {
			hasMore.value = false;
			uni.showToast({
				title: '没有更多兴趣了',
				icon: 'none'
			});
		}, 500);
	};

	// 页面挂载
	onMounted(() => {
		console.log('兴趣页面已加载');
	});
	
	onPullDownRefresh(() => {
		console.log("下拉刷新")
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 1000);
	})
	onReachBottom(() => {
		console.log("上拉加载更多")
	})
</script>

<style scoped lang="scss">
	/* 全局变量 */
	$primary-color: #7C3AED;
	$bg-color: #f3f4f6;
	$white: #ffffff;
	$text-primary: #1F2937;
	$text-secondary: #6B7280;
	$border-color: #E5E7EB;

	.interest-container {
		background-color: $bg-color;
		min-height: 100vh;
		padding-bottom: 120rpx;
	}

	/* 搜索栏 */
	.search-bar {
		padding: 20rpx 30rpx;
		background-color: $white;
		position: sticky;
		top: 0;
		z-index: 10;
	}

	.search-input {
		display: flex;
		align-items: center;
		background-color: $bg-color;
		border-radius: 36rpx;
		padding: 20rpx 30rpx;
	}

	.search-icon {
		font-size: 28rpx;
		color: #9CA3AF;
		margin-right: 10rpx;
	}

	.placeholder {
		margin-left: 10rpx;
		color: #9CA3AF;
		font-size: 28rpx;
	}

	/* 热门标签 */
	.hot-tags-section {
		padding: 30rpx;
		background-color: $white;
		margin-bottom: 20rpx;
	}
	
	/* 更多筛选按钮 */
	.filter-button-wrapper {
		padding: 0 30rpx 20rpx;
	}
	
	.filter-button {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: $white;
		color: $text-primary;
		padding: 20rpx 0;
		border-radius: 12rpx;
		font-size: 28rpx;
		width: 100%;
		border: 1rpx solid $border-color;
		
		&::after {
			border: none;
		}
	}
	
	.arrow-icon {
		margin-left: 10rpx;
		font-size: 24rpx;
		color: $text-secondary;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: 600;
		color: $text-primary;
		margin-bottom: 20rpx;
	}

	.hot-tags {
		display: flex;
		flex-wrap: wrap;
	}

	.tag-item {
		background-color: $bg-color;
		padding: 16rpx 32rpx;
		border-radius: 24rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;

		&:active {
			background-color: rgba($primary-color, 0.1);
		}
	}

	.tag-item text {
		font-size: 26rpx;
		color: $text-secondary;
	}

	/* 分类导航 */
	.category-section {
		background-color: $white;
		margin-bottom: 20rpx;
	}

	.category-scroll {
		display: flex;
		padding: 0 20rpx;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
	}

	.category-item {
		padding: 24rpx 32rpx;
		position: relative;

		&:active {
			background-color: rgba($primary-color, 0.05);
		}
	}

	.category-item.active text {
		color: $primary-color;
		font-weight: 500;
	}

	.category-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 24rpx;
		height: 4rpx;
		background-color: $primary-color;
		border-radius: 2rpx;
	}

	/* 兴趣列表 */
	.interest-list {
		padding: 0 20rpx;
		// 增加底部内边距避免被tabBar遮挡，特别是在安卓设备上
		padding-bottom: 60rpx;
	}

	.interest-card {
		background-color: $white;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.interest-header {
		position: relative;
	}

	.cover-image {
		width: 100%;
		height: 300rpx;
	}

	.interest-overlay {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
		padding: 30rpx 24rpx 20rpx 24rpx;
	}

	.interest-title {
		font-size: 36rpx;
		font-weight: 700;
		color: $white;
		margin-bottom: 12rpx;
	}

	.interest-stats {
		display: flex;
	}

	.stat-item {
		display: flex;
		align-items: center;
		margin-right: 30rpx;
	}

	.icon-emoji {
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.9);
		margin-right: 8rpx;
	}

	.stat-text {
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.9);
	}

	/* 话题预览 */
	.topic-preview {
		padding: 20rpx 24rpx;
		border-bottom: 1rpx solid $border-color;
	}

	.topic-item {
		margin-bottom: 16rpx;
	}

	.topic-item:last-child {
		margin-bottom: 0;
	}

	.topic-author {
		font-size: 26rpx;
		font-weight: 500;
		color: $text-primary;
		margin-right: 10rpx;
	}

	.topic-content {
		font-size: 26rpx;
		color: $text-secondary;
	}

	/* 底部信息 */
	.interest-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 24rpx;
	}

	.activity-count {
		font-size: 26rpx;
		color: $text-secondary;
	}

	.join-button {
		background-color: $primary-color;
		color: $white;
		padding: 10rpx 32rpx;
		border-radius: 18rpx;
		font-size: 26rpx;
		border: none;
		width: 150rpx;
		margin-left: 350rpx;

		&::after {
			border: none;
		}
	}

	/* 加载更多 */
	.load-more {
		text-align: center;
		padding: 40rpx 0;
		color: $text-secondary;
		font-size: 28rpx;
	}

	/* 空状态 */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 160rpx 0;
	}

	.empty-text {
		margin-top: 30rpx;
		color: #9CA3AF;
		font-size: 32rpx;
	}

	.empty-icon {
		font-size: 120rpx;
		color: #D1D5DB;
	}

	/* 响应式适配 */
	@media screen and (max-width: 320px) {
		.cover-image {
			height: 240rpx;
		}
	}

	@media screen and (min-width: 768px) {
		.interest-container {
			max-width: 750rpx;
			margin: 0 auto;
		}
	}
</style>